<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>零售网点 - 优科曼</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="shortcut icon" href="./favicon.ico">
	<script src="libs/modernizr.custom.js"></script>
	<script src="libs/prefixfree.js"></script>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
	<script src="libs/jquery-1.11.3.min.js"></script>
	
</head>
<body>
	<div id="bloc">
		<div id="nav-dialog" class="dialog dialogDown">
		    <div class="dialog_mask"></div>
		    <div class="dialog_content">
		        <ul class="nav-item scroll-animate father" data-child="li" data-effect="fadeInDownSmall" data-delay=".04">
		            <li class="on animated fadeInDownSmall"  style="animation-delay: 0s">
		                <a href="index.html" class="transi">首页</a>
		            </li>
		            <li class="animated fadeInDownSmall"  style="animation-delay: 0.04s">
		                <a class="transi">产品中心</a>
		                <ol class="transi">
		                	<li><a href="dishwasher_series.html">洗碗机系列</a></li>
		                    <li><a href="system.html">配套体系</a></li>
		                </ol>
		            </li>
					<li class="animated fadeInDownSmall"  style="animation-delay: 0.08s">
		                <a class="transi">企业动态</a>
						<ol class="transi">
							<li><a href="brand.html">品牌介绍</a></li>
							<li><a href="news.html">新闻动态</a></li>
					   </ol>
		            </li>
		            <li class="animated fadeInDownSmall"  style="animation-delay: 0.12s">
		                <a class="transi" >城市合伙人</a>
		                <ol class="transi">
		                    <li><a href="join.html">加入我们</a></li>
		                    <li><a href="network.html">零售网点</a></li>
		                </ol>
		            </li>
		            <li class="animated fadeInDownSmall"  style="animation-delay: 0.16s">
		                <a class="transi">工程师团队</a>
		                <ol class="transi">
		                    <li><a href="fame.html">名人堂</a></li>
		                    <li><a href="support.html">技术支持</a></li>
		                </ol>
		            </li>
		            <li class="animated fadeInDownSmall"  style="animation-delay: 0.20s">
		                <a class="transi" >联系我们</a>
		                <ol class="transi">
		                    <li><a href="consultation.html">咨询服务</a></li>
		                    <li><a href="rent.html">租赁服务</a></li>
		                </ol>
		            </li>
		        </ul>
		    </div>
		</div>
		<header>
		 <div class="max-wid">
	        <a href="index.html" class="iconfont wc f-28 logo"><img src="images/logo1.png" alt="">
	        	<img style="opacity: 0;position: absolute;left: 0;top: calc(50% - 14px);" src="images/logo2.png" alt=""></a>
	        <!--<div id="language" class="flex wc">
	            <a class="cn wc on f-bold">中</a><span>/</span><a class="en wc en-b">EN</a>
	        </div>-->
	        <nav class="pc-nav pc">
	            <div id="nav-box">
	                <div class="log-in">
	                    <span class="ml-48 searchGo pc" style="cursor: pointer;display: inline-block;">
	                        <a class="iconfont search-show" style="margin: 0 4px;"><img src="images/sel1.png" alt=""><img src="images/sel2.png" alt=""></a>
	                        <a class="iconfont search-close" style="margin: 0 4px;font-size: 24px;color: #fff">x</a>
	                        <div class="search-box">
	                            <i class="iconfont wc mr-8" style="vertical-align: baseline;"><img src="images/sel1.png" alt=""></i>
	                            <input type="text" id='search-txt' placeholder="搜索...">
	                            <div class="line-box">
	                                <h5>快速链接</h5>
	                                <div><a href="javascript:;">美乐水精灵</a></div>
	                                <div><a href="javascript:;">美乐水管家</a></div>
	                                <div><a href="javascript:;">台下超滤净水器</a></div>
	                                <div><a href="javascript:;">大流量反渗透系统</a></div>
	                                <div><a href="javascript:;">确认过眼神，你是我想要的人</a></div>
	                            </div>
	                        </div>
	                    </span>
	                    <a class="pc ml-12 pr music-set" style="cursor: pointer;position: relative;">
	                        <img src="images/music1.png" alt="">
	                        <img src="images/music2.png" alt="">
	                        <span></span>
	                    </a>
	                </div>
	                <span class="flex enter go-menu">
	                    <svg version="1.1" id="bur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	                         width="768.637px" height="650.717px" viewBox="0 0 768.637 650.717" enable-background="new 0 0 768.637 650.717"
	                         xml:space="preserve">
	                        <g>
	                            <defs>
	                                <rect id="SVGID_1_" width="768.637" height="650.717"/>
	                            </defs>
	                            <clipPath id="SVGID_2_">
	                                <use xlink:href="#SVGID_1_"  overflow="visible"/>
	                            </clipPath>

	                            <path class="l1" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	    M44.199,98.89c0,0,123.738-123.055,340.119,0c216.381,123.054,340.118,0,340.118,0"/>

	                            <path class="l2" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	    M44.199,325.358c0,0,123.738-123.055,340.119,0c216.381,123.056,340.118,0,340.118,0"/>

	                            <path class="l3" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	    M44.199,551.827c0,0,123.738-123.055,340.119,0c216.381,123.054,340.118,0,340.118,0"/>
	                        </g>
	                    </svg>
	                    <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
	                      <path class="line" d="M 34,32 L 66,68" />
	                      <path class="line" d="M 66,32 L 34,68" />
	                    </svg>
	                </span>
	            </div>
	        </nav>
	        <nav class='app-nav app'>
	            <a class="getAppNav">
	                <svg version="1.1" id="bur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="768.637px" height="650.717px" viewBox="0 0 768.637 650.717" enable-background="new 0 0 768.637 650.717"
                     xml:space="preserve">
	                    <g>
	                        <defs>
	                            <rect id="SVGID_1_" width="768.637" height="650.717"/>
	                        </defs>
	                        <clipPath id="SVGID_2_">
	                            <use xlink:href="#SVGID_1_"  overflow="visible"/>
	                        </clipPath>

	                        <path class="l1" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M44.199,98.89c0,0,123.738-123.055,340.119,0c216.381,123.054,340.118,0,340.118,0"/>

	                        <path class="l2" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M44.199,325.358c0,0,123.738-123.055,340.119,0c216.381,123.056,340.118,0,340.118,0"/>

	                        <path class="l3" clip-path="url(#SVGID_2_)" fill="none" stroke="#898989" stroke-width="88.398" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
	M44.199,551.827c0,0,123.738-123.055,340.119,0c216.381,123.054,340.118,0,340.118,0"/>
	                    </g>
	                </svg>
	                <svg class="x" version="1.1" height="100" width="100" viewBox="0 0 100 100">
	                  <path class="line" d="M 34,32 L 66,68" />
	                  <path class="line" d="M 66,32 L 34,68" />
	                </svg>
	            </a>
	            <ol class='scroll-animate father' data-child='.alan' data-effect='fadeInRightSmall' data-hideAni='fadeOutRightSmall' data-delay='0.08s' data-width='1'>
	                <li class="alan"><a href="index.html">首页</a></li>
	                <li class="alan child-Down">
	                    <a>产品中心</a>
	                    <div class="app-down scroll-animate father" data-child='a' data-effect='fadeInRightSmall' data-delay='0.08s'>
	                         <a href="dishwasher_parts.html">洗碗机配件</a>
		                     <a href="system.html">配套体系</a>
		                     <a href="dishwasher_series.html">洗碗机系列</a>
	                    </div>
	                </li>
	                <li class="alan"><a href="brand.html">品牌介绍</a></li>
	                <li class="alan child-Down">
	                    <a>城市合伙人</a>
	                    <div class="app-down scroll-animate father" data-child='a' data-effect='fadeInRightSmall' data-delay='0.08s'>
	                        <a href="join.html">加入我们</a>
		                    <a href="network.html">零售网点</a>
	                    </div>
	                </li>
	                <li class="alan child-Down">
	                	<a>工程师团队</a>
	                	<div class="app-down scroll-animate father" data-child='a' data-effect='fadeInRightSmall' data-delay='0.08s'>
	                       <a href="fame.html">名人堂</a>
		                   <a href="support.html">技术支持</a>
	                    </div>
	                </li>
	                <li class="alan child-Down">
	                    <a>城市合伙人</a>
	                    <div class="app-down scroll-animate father" data-child='a' data-effect='fadeInRightSmall' data-delay='0.08s'>
	                       <a href="consultation.html">咨询服务</a>
		                    <a href="rent.html">租赁服务</a>
	                    </div>
	                </li>
	            </ol>
	        </nav>
	    </div>
	</header>

	<article id="retail">
		<section id="top">
			<div class="banner">
				<img src="images/retail_banner.jpg" alt="">
				<img src="images/retail_banner2.jpg" alt="">
				<div class="txt">
					<span class="animated fadeInDownSmall"><em>RETAIL</em>&nbsp;&nbsp;NETWORK</span>
					<div class="animated fadeInUpSmall">零 售 网 点</div>
				</div>
				<ul class="clearfix">
					<li class="animated fadeInDownSmall" style="width: 50%">
						<img style="top: calc(50% - 11px)" src="images/retail_icon1_1.png" alt="">
						<img src="images/retail_icon1_2.png" alt="">
						线上渠道
					</li>
					<li class="animated fadeInDownSmall"  style="width: 50%;animation-delay: 0.2s">
						<img style="top: calc(50% - 11px)" src="images/retail_icon2_1.png" alt="">
						<img src="images/retail_icon2_2.png" alt="">
						线下渠道
					</li>
				</ul>
			</div>
		</section>
		<section class="wraps">
			<div class="item ">
				<div class="wrap wrap1 clearfix">
					<div class="container">
						<div class="line"></div>
						<div class="title">
							线上<strong>渠道</strong>
						</div>
						<div class="con">
							<div class="img">
								<a href="javascript:;"><img src="images/retail_img2.png" alt=""></a>
								<p>去淘宝购买</p>
							</div>
						</div>
						<div class="con">
							<div class="img">
								<a href="javascript:;"><img src="images/retail_img3.png" alt=""></a>
								<p>关注抖音</p>
							</div>
						</div>
						<div class="con">
							<div class="img">
								<a href="javascript:;"><img src="images/retail_img1.png" alt=""></a>
								<p>关注微信公众号</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="item ">
				<div class="wrap wrap2">
					<div class="container">
						<div class="line"></div>
						<div class="title">
							线下<strong>渠道</strong>
						</div>
						<div class="search">
							<h3>优科曼全国办事处</h3>
							<select name="" id="">
								<option value="福建省">福建省</option>
								<option value="浙江省">浙江省</option>
								<option value="江苏省">江苏省</option>
							</select>
							<select name="" id="">
								<option value="宁波市">宁波市</option>
								<option value="温州市">温州市</option>
								<option value="杭州市">杭州市</option>
							</select>
							<a class="btn" href="javascript:;">搜索</a>
						</div>
						<div class="con clearfix">
							<div class="map">
								<div id="map"></div>
								<script type="text/javascript">
								    //创建和初始化地图函数：
								    function initMap(pointJ,pointW){
								        createMap(pointJ,pointW);//创建地图
								        setMapEvent();//设置地图事件
								        //addMapControl();//向地图添加控件
								    }
								    
								    //创建地图函数：
								    function createMap(pointJ,pointW){
								        var map = new BMap.Map("map",{minZoom:4,maxZoom:11});//在百度地图容器中创建一个地图
								        var point = new BMap.Point(pointJ,pointW);//定义一个中心点坐标
								        map.centerAndZoom(point,11);//设定地图的中心点和坐标并将地图显示在地图容器中
								        window.map = map;//将map变量存储在全局
										var marker = new BMap.Marker(point);  // 创建标注
										map.addOverlay(marker);               // 将标注添加到地图中
								    }
								    
								    //地图事件设置函数：
								    function setMapEvent(){
								        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
								        map.disableScrollWheelZoom()//禁用地图滚轮放大缩小
								        map.disableDoubleClickZoom();//禁用双击放大
								        //map.enableScrollWheelZoom();//启用地图滚轮放大缩小
								        //map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
								        map.enableKeyboard();//启用键盘上下左右键移动地图
								    }
								    
								    //地图控件添加函数：
								    function addMapControl(){
								        //向地图中添加缩放控件
									var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
									map.addControl(ctrl_nav);
								        //向地图中添加缩略图控件
									var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
									map.addControl(ctrl_ove);
								        //向地图中添加比例尺控件
									var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
									map.addControl(ctrl_sca);
								    }
								    
								    initMap('121.560562','29.875805');//创建和初始化地图， css未加载完成地图位置不准确，完成后再次加载
								</script>  
								<div class="txt">
									<div class="left fl"><img src="images/retail_ icon3_2.png" alt="">浙江省&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;宁波市</div>
									<div class="right fr">地区：鄞州区</div>
								</div>
							</div>
							<ul>
								<li data-pointJ="121.560562" data-pointW="29.875805" class="on">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>浙江省</em>
										</span>
										<h5>宁波市</h5>
										<div class="add">
											<p>地区：鄞州区</p>
											
										</div>
									</a>
								</li>
								<li data-pointJ="121.555961" data-pointW="29.884431">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>浙江省</em>
										</span>
										<h5>宁波市</h5>
										<div class="add">
											<p>地区：江北区</p>
											
										</div>
									</a>
								</li>
								<li data-pointJ="121.680143" data-pointW="29.940905">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>浙江省</em>
										</span>
										<h5>宁波市</h5>
										<div class="add">
											<p>地区：镇海区</p>
											
										</div>
									</a>
								</li>
								<li data-pointJ="121.851324" data-pointW="29.901339">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>浙江省</em>
										</span>
										<h5>宁波市</h5>
										<div class="add">
											<p>地区：鄞州区</p>
											
										</div>
									</a>
								</li>
								<li data-pointJ="121.555961" data-pointW="29.884431">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>浙江省</em>
										</span>
										<h5>宁波市</h5>
										<div class="add">
											<p>地区：鄞州区</p>
											
										</div>
									</a>
								</li>
								<li data-pointJ="121.555961" data-pointW="29.884431">
									<a href="javascript:;">
										<span>
											<img src="images/retail_ icon3_1.png" alt="">
											<img src="images/retail_ icon3_2.png" alt="">
											<em>test1</em>
										</span>
										<h5>test2</h5>
										<div class="add">
											<p>地区：test</p>
											
										</div>
									</a>
								</li>
							</ul>
							
						</div>
					</div>
				</div>
				<div class="wrap wrap3">
					<div class="container clearfix">
						<div class="line"></div>
						<div class="title">
							<strong>企业分布</strong>
						</div>
						<div class="left">
							<span style="color:#036eb7; ">中国总部</span><span style="color: #fff;">中国总部</span><img style="margin-top: -5px;" src="images/retail_star.png" alt="">
						</div>
						
						
						<ul>
							<li>内蒙 — 呼和浩特</li>
							<li>北京 — 北京</li>
							<li>天津 — 天津</li>
							<li>山东 — 青岛</li>
							<li>河南 — 郑州</li>
							<li>江苏 — 苏州</li>
							<li>云南 — 昆明</li>
							<li>上海 — 上海</li>
							<li>浙江 — 杭州</li>
							<li>江西 — 南昌</li>
							<li>福建 — 厦门</li>
							<li>广东 — 广州</li>
							<li>海南 — 海口</li>
						</ul>
						<div class="map">
							<img src="images/retail_ditu.png" alt="">
						</div>
						<ol>
							<li>14个销售机构</li>
							<li>14家客户服务中心</li>
							<li>200多名训练有素的服务工程师队伍</li>
						</ol>
					</div>
				</div>
			</div>
		</section>
		<div class="ewm">
			<div class="ewm_d on">
				<div class="ewm_mask"></div>
				<div class="img"><img src="images/ewm.jpg" alt=""></div>
			</div>
			<div class="ewm_d">
				<div class="ewm_mask"></div>
				<div class="img"><img src="images/ewm.jpg" alt=""></div>
			</div>
		</div>
	</article>
	<script>
		var network_index = sessionStorage.getItem("network_index");
	if (network_index == null) {
		$('#top li').removeClass('active').eq(0).addClass('active');
		$('.wraps .item').removeClass('active').eq(0).addClass('active');
	}else{
		$('#top li').removeClass('active').eq(network_index).addClass('active');
		$('.wraps .item').removeClass('active').eq(network_index).addClass('active');
	}
	if (network_index == 1) {
		var pointJ = parseFloat($('#retail .wrap2 .con li:first-child').attr('data-pointJ'));
		var pointW = parseFloat($('#retail .wrap2 .con li:first-child').attr('data-pointW'));
		initMap(pointJ,pointW);//创建和初始化地图
	}
	</script>
	<footer class="footer">
		<div class="container clearfix">
			<div class="foot-nav fr">
	            <a href="network.html">零售网点</a><em>/</em><a href="support.html">技术支持</a><em>/</em><a href="join.html">加入我们</a><a class="wx iconfont f-20" href="javascript:;"><img src="images/wx1.png" alt=""><img src="images/wx2.png" style="margin-left: -22px;opacity: 0" alt=""><span class="wx_ewm"><img src="images/ewm.jpg" alt=""></span></a>
	        </div>
			<span class="fl">@Copyright 2019 Ucomen All Rights Reserved</span>
	        <div id="goTop"><img src="images/up.png" alt=""></div>
        </div>
	</footer>
	<audio src="audio/sound.wav" id="sound" autoplay loop></audio>
</div>

<script src="libs/jquery3.3.1.js"></script>
<script src="libs/jquery.easing.min.js"></script>
<script src="libs/main.js"></script>
<script src="libs/jquery.aniview.min.js"></script>	
<script src="libs/TweenMax.min.js"></script>
<script src="libs/anime.js"></script>
<script src="libs/jquery.scrollify.js"></script>
<script src="js/pixi.js"></script>
<script src="libs/perlin.js"></script>
<script src="js/base.js"></script>
<script src="js/index.js"></script>
<script src="libs/base.js"></script>
<script src="libs/jquery.mousewheel.min.js"></script>
<script src="libs/smooth.js"></script>
<script src="libs/app.js"></script>
<script type="text/javascript"> 
	


	$(document).ready(function() {
		var h = $(window).height();
		var h1 = $('#retail').height();
		var h2 = $('.footer').height()+80;
		if (h1+h2 < h) {$('#retail .wrap1').css('height', 'calc(100vh - '+($('#top').height()+h2)+'px)');}


		$('#retail .wrap2 .con li').click(function(event) {
			$(this).addClass('on').siblings().removeClass('on');
			var pointJ = parseFloat($(this).attr('data-pointJ'));
			var pointW = parseFloat($(this).attr('data-pointW'));
			initMap(pointJ,pointW);//创建和初始化地图
			
			var p = $(this).find('em').html();
			var c = $(this).find('h5').html();
			var a = $(this).find('.add p:first-child').html();
			$('#retail .wrap2 .map .txt .left').html('<img src="images/retail_ icon3_2.png" alt="">'+p+'&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp'+c);
			$('#retail .wrap2 .map .txt .right').html(a);
		});
		$('#top li').click(function(event) {
			sessionStorage.setItem("network_index", $(this).index());
			if ($(this).index() == 1) {
				var pointJ = parseFloat($('#retail .wrap2 .con li:first-child').attr('data-pointJ'));
				var pointW = parseFloat($('#retail .wrap2 .con li:first-child').attr('data-pointW'));
				initMap(pointJ,pointW);//创建和初始化地图
			}
			var h = $(window).height();
			var h1 = $('#retail').height();
			var h2 = $('.footer').height()+115;
			if (h1+h2 < h) {$('#retail .wrap1').css('height', 'calc(100vh - '+($('#top').height()+h2)+'px)');}
		});
	});

</script>  
</body>
</html>